<template>
	<a-card hoverable v-if="waitOrderList.total>0">
		<template #title>
			未支付订单（{{waitOrderList.total}}）
		</template>
		<a-space :size="10" direction="vertical" fill>
			<a-typography style="margin-bottom: -5%;width: 1000px;">
				<a-typography-paragraph>
					<a-space wrap direction="vertical" :size="100" align="start">
						<a-row style="margin-bottom: -25%;" justify="center" v-for="(item,index) in waitOrderList.data"
							:key="index">
							<a-col>
								<div style="width: 78px;height: 78px;">
								</div>
							</a-col>
							<a-col>
								<a-typography style="margin-left:7%;width: 423px;margin-top: -15%;">
									<a-typography-title
										style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;"
										ellipsis>
										订单编号:{{item.orderId}}
									</a-typography-title>
									<a-typography-paragraph style="font-size: 12px;color: gray;height: auto;">
										创建时间:{{item.createTime}}
									</a-typography-paragraph>
									<a-table :data="waitOrderList.data[index].goodsList" style="width: 950px;" ref="shoppingCart"
										:pagination="false">
										<template #columns>
											<a-table-column title="商品图片" :width="200">
												<template #cell="{record}">
													<div style="width: 120px;height: 120px;margin-left: -10px;">
														<img style="object-fit: cover;width: 100%;height: 100%;"
															:src="record.src" />
													</div>
												</template>
											</a-table-column>
											<a-table-column v-for="(col,cIndex) in columns" :title="col.title"
												ellipsis>
												<template #cell="{record}">
													<a-tooltip :content="record[col.dataIndex].toString()"
														v-if="col.dataIndex == 'name' || col.dataIndex == 'info'"
														position="bottom" :arrow-style="{
															width: '0px',
															height: '0px'
														}">
														<span
															v-if="col.dataIndex == 'name' || col.dataIndex == 'info'"
															style="white-space: normal;">
															{{record[col.dataIndex]}}
														</span>
													</a-tooltip>
													<span v-if="col.dataIndex == 'sPrice'"
														style="white-space: normal;">
														{{record[col.dataIndex]}}
													</span>
												</template>
											</a-table-column>
											<a-table-column title="数量">
												<template #cell="{record}">
													{{record.amount}}
												</template>
											</a-table-column>
											<a-table-column title="金额">
												<template #cell="{record}">
													{{record.sPrice * record.amount}}
												</template>
											</a-table-column>
										</template>
									</a-table>
									<a-typography-paragraph style="text-align: right;width: 950px;">
										<a-space style="color: gray;margin-top: 10px;">
											<a-button type="primary" @click="toPay(item)">
												去支付
											</a-button>
											<a-button @click="cancelWaitOrder(item.orderId)">取消订单</a-button>
										</a-space>
									</a-typography-paragraph>
									<a-divider style="padding-right: 740px;" />
									<a-typography-title
										style="font-size: 12px;color: gray;height: auto;transform: translateX(250%);"
										v-if="isLastData(index)">
										已经是最后了
									</a-typography-title>
								</a-typography>
							</a-col>
						</a-row>
						<a-pagination :total="waitOrderList.total" show-total show-jumper show-page-size
						:page-size-options="[1,5,10]" @change="changePageList" @page-size-change="changeSizeList"
						:page-size="currentPageSize"
						v-if="waitOrderList.total > 0"/>
					</a-space>
				</a-typography-paragraph>
			</a-typography>
		</a-space>
	</a-card>
	<a-card hoverable v-else-if="waitOrderList.total == 0">
		<template #title>
			未支付订单（0）
		</template>
		<a-result :status="null">
			<template #icon>
				<IconFaceFrownFill />
			</template>
			<template #title>这里什么也没有哦</template>
			<template #extra>
				<a-button type="primary" @click="()=>{router.push({path: '/index'});}">前往首页</a-button>
			</template>
			<a-typography style="background: var(--color-fill-2); padding: 24px;">
				<a-typography-paragraph>你没有订单未支付</a-typography-paragraph>
			</a-typography>
		</a-result>
	</a-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		watch,
		nextTick
	} from 'vue';

	import apiUrl from '@/constant/user/apiUrl.js';
	import userApi from '@/module/user/api/index.js';
	import indexApi from '@/module/orderDetail/api/index.js';
	import jwt_decode from 'jwt-decode';
	import { Modal } from '@arco-design/web-vue';

	let {
		proxy
	} = getCurrentInstance();
	
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	const props = defineProps({
		formVisible: Boolean,
		loginForm: Object
	});

	const emit = defineEmits();

	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;

	let waitOrderList = reactive({});
	let currentPage = ref(1);
	let currentPageSize = ref(10);
	
	let columns = reactive([{
			title: '商品名称',
			dataIndex: 'name'
		},
		{
			title: '商品信息',
			dataIndex: 'info'
		},
		{
			title: '单价',
			dataIndex: 'sPrice'
		}
	]);

	//判断最后一条数据的位置
	function isLastData(index){
		//如果数据总条数比每页条数还小,直接返回
		if(waitOrderList.total <= currentPageSize.value){
			return waitOrderList.total == index+1 ? true:false;
		}
		else if(waitOrderList.total > currentPageSize.value){
			let restPages = waitOrderList.total % currentPageSize.value;
			if(restPages == 0){
				let lastPages = waitOrderList.total / currentPageSize.value;
				if(currentPage.value == lastPages && waitOrderList.data.length-1 == index){
					return true;
				}
			}
			else if(restPages != 0){
				let lastPages = (waitOrderList.total / currentPageSize.value) + 1;
				if(currentPage.value == lastPages && waitOrderList.data.length-1 == index){
					return true;
				}
			}
		}
	}

	async function loadingWaitOrderList() {
		waitOrderList.resp = await userApi.getWaitOrderList(jwt_decode(sessionStorage.getItem("token")).uid, {
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		});
		waitOrderList.data = waitOrderList.resp.data;
		waitOrderList.total = waitOrderList.resp.total;
		console.log('waitOrderList.resp', waitOrderList.resp);
		console.log('waitOrderList', waitOrderList.data);
		emit('getTab',ref(route.meta.tab));
		return waitOrderList;
	}
	
	async function cancelWaitOrder(orderId){
		Modal.open({
		        title: '警告',
		        content: '确定要取消该订单吗?',
				async onOk(){
					let cancelWaitOrderStatus = reactive({});
					cancelWaitOrderStatus.resp = await userApi.cancelWaitOrder(orderId);
					console.log('cancelWaitOrderStatus.resp', cancelWaitOrderStatus.resp);
					if(cancelWaitOrderStatus.resp.flag == true){
						proxy.$message.success('取消订单成功');
						nextTick(()=>{
							loadingWaitOrderList();
						});
					}
					else if(cancelWaitOrderStatus.resp.flag == false){
						proxy.$message.error('取消订单失败');
					}
				}
		      });
	}
	
	async function toPay(orderItem){
		router.push({name: 'orderDetail',params:{id: orderItem.orderId}});
	}
	
	function changePageList(number){
		console.log('当前页数:',number);
		currentPage.value = number;
		loadingWaitOrderList();
	}
	
	function changeSizeList(number){
		console.log('当前条数:',number);
		currentPageSize.value = number;
		loadingWaitOrderList();
	}

	onMounted(() => {
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingWaitOrderList();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/user/css/save.less';
</style>
